<template>
	<view class="content">
		<view class="addrss">
			<view class="city">
				<text>
					{{city}} 
					<image src="../../../static/images/s38.png" mode="widthFix"></image>
				</text>
			</view>
			<input type="text" v-model="query" value="" placeholder="请输入收货地址" />
			<text class="clear" @tap='clear'>取消</text>
		</view>
		<view class="addrs">
			<view class="scroll" v-for="item in address" :key='item.id' @tap='indexAdd(item.title)'>
				<image src="../../../static/images/s39.png" mode="widthFix"></image>
				<view class="addtitle">
					<text class="towm">{{item.title}}</text>
					<text class="city_info">{{item.address}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				city: '',
				query:'',
				address:[]
			}
		},
		onLoad() {
	
		this.getadd()
		},
		onShow() {
				
		},
// computed:{
// 	citys(){
// 		return this.$store.state.add.slice(0, 2)
// 	}
// },
		methods: {
			
			getadd(){
				// uni.request({
				// 	url:getApp().globalData.gain + '/ws/location/v1/ip?key=PFQBZ-HH735-IUPIE-QCNLU-MOZMT-G5BRP',
				// 	success: (res) => {
				// 		// console.log(res)
				// 		this.city = res.data.result.ad_info.city
				// 		uni.setStorageSync('city',this.city )
				// 	}
				// })
				
				this.$ajax(
				this.apiList.getlocal,
				).then(res=>{
					this.city = res.data.result.ad_info.city
					uni.setStorageSync('city',this.city)
				})
				
			},
			indexAdd(addname){
				console.log(11)
				uni.setStorageSync('city',addname )
				uni.switchTab({
					url:'../index',
					success: () => {
						this.city = addname.substring(0,2)
						// this.$store.commit('ADD_CITY', addname)
					}
				})
			},
			clear(){
				this.query = ''
			}
},
		watch:{
			query(newVaue,oldVaue){
				// uni.request({
				// 	url: getApp().globalData.Map +'/ws/place/v1/search?keyword='+newVaue+'&page_size=30&boundary=region('+this.city+',0)&key=PFQBZ-HH735-IUPIE-QCNLU-MOZMT-G5BRP',
				// 	method:'GET',
				// 	success: (res) => {
				// 		// console.log(res)
				// 		// console.log(res.data)
				// 	this.address = res.data.data
				// 	}
				// })
				this.$ajax(
				this.apiList.getdz,
				{
					keyword:newVaue,
					city:this.city
				},
				).then(res=>{
					this.address = res.data.data
				})
				
				
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100%;
		box-sizing: border-box;

		& .addrss {
			width: 100%;
			background: #fff;
			display: flex;
			align-items: center;
			padding: 20upx 20upx;
			box-sizing: border-box;
			border: 2px solid #f3f4f5;
			// box-shadow: 0 0 20upx 0 #eee;

			& .city {
				display: flex;
				flex-direction: row;
				align-items: center;

				& text {
					display: inline-block;
					width: 113upx;
					text-align: center;
					font-size: 30upx;
					font-family: PingFang SC;
					font-weight: 400;
					color: rgba(189, 189, 189, 1);
					border-right: 1upx solid #eee;
					margin-right: 20upx;
				}

				& image {
					vertical-align: middle;
					width: 20upx;
					margin: 0upx 10upx;
				}
			}

			& input {
				width: 100%;
				height: 100%;
				display: inline-block;
				background: #F3F4F5;
				height: 64rpx;
				border-radius: 64rpx;
				padding-left: 41rpx;
			}

			& .clear {
				display: inline-block;
				width: 113upx;
				text-align: center;
				font-size: 30upx;
				font-family: PingFang SC;
				font-weight: 400;
				color: rgba(189, 189, 189, 1);
				border-left: 1upx solid #eee;
				margin-left: 20rpx;
			}
		}

		& .addrs {
			width: 100%;
			height: 100vh;
			box-sizing: border-box;
			overflow-y: scroll;

			& .scroll {
				display: flex;
				align-items: center;
				width: 100%;
				padding: 10upx 30upx;
				box-sizing: border-box;
				box-shadow: 0 0 20upx #ccc;
					margin-bottom: 10upx;
				& image {
					width: 20upx;
					margin-right: 20upx;
				}
			}

			& .addtitle {
				display: flex;
				flex-direction: column;
			
				& .towm {
					font-size: 30upx;
					font-family: PingFang SC;
					font-weight: 400;
					color: rgba(97, 97, 97, 1);
					margin-bottom: 10upx;
				}

				& .city_info {
					font-size: 24upx;
					font-family: PingFang SC;
					font-weight: 400;
					color: rgba(189, 189, 189, 1);
				}
			}
		}
	}
</style>
